<template>
  <div id="contain">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>账号：{{ list.loginName }}</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="dialogFormVisible = true"
            >编辑资料</el-button
          >
          <el-button
            style="float: right; padding: 3px 10px"
            type="text"
            @click="dialog = true"
            >修改密码</el-button
          >
        </div>
        <div class="infosdiv" style="margin: 10px">
          <p>
            <span class="tit">用户名：</span
            >{{list.username }}
          </p>
          <p>
            <span class="tit">个人简介：</span>
            {{list.introduce }}
          </p>
          <p><span class="tit">手机号：</span> {{ list.mobile }}</p>
          <p>
            <span class="tit"> 邮箱：</span
            >{{list.email }}
          </p>
          <p>
            <span class="tit"> 年龄：</span>{{list.age }}
          </p>
          <p>
            <span class="tit"> 性别：</span
            >{{list.sex }}
          </p>
          <div>
            <span class="tit"> 头像：</span>
            <img
              :src="list.headUrl"
              alt="图片加载失败"
              style="width: 200px; height: 200px"
            />
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="头像图片" :label-width="formLabelWidth">
          <el-upload
            action=""
            list-type="picture-card"
            :file-list="fileList"
            :http-request="upload"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realName" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="form.idCard" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.sex" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.introduce"
            style="width: 500px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">点击修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="dialog">
      <el-form :model="form2">
        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input v-model="form2.oldPwd " style="width: 500px" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="form2.newPwd1" style="width: 500px" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="form2.newPwd2" style="width: 500px" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">点击修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      list: {},
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {},
      fileList: [],
      imgForm: new FormData(),
      imgUrl: "",
      fileName: "",
      fileUrl: "",
      dialog:false,
      form2:{},
      id:1
    };
  },
  mounted() {
    this.fn();
  },
  methods: {
    fn() {
      this.$axios({
        method: "get",
        url: "/sys/user/getInfo",
        headers: { token: this.token },
      }).then((res) => {
        // console.log("获取用户信息");
        // console.log(res.data.page);
        if (res.data.code === 0) {
          this.list = res.data.page;
          this.form = this.list;
          this.id=res.data.page.id
            // console.log(this.list);
        }
      });
    },
    submit() {
      this.dialogFormVisible = false;
      this.form.id = this.id;
      // console.log(this.form);
      this.$axios({
        method: "post",
        url: "/sys/user/update",
        headers: { token: this.token },
        data: this.form,
      }).then((res) => {
        if (res.data.code === 0) {
          // console.log('修改个人信息');
          // console.log(res.data);
          this.fn();
        }
      });
    },
    upload() {
      this.$axios({
        method: "post",
        url: "/oss/upload/avatar",
        headers: { token: this.token },
        data: this.imgForm,
      }).then((res) => {
        let data = res.data;
        if (data.code !== 0) {
          this.$message.error(res.data.msg);
          return false;
        }
        this.fileName = data.name;
        this.fileUrl = data.url;
        this.form.headUrl = this.fileUrl;
        // this.$message.success("上传成功");
      });
    },
    beforeUpload(file) {
      if (file) {
        this.imgForm.append("file", file);
      } else {
        return false;
      }
    },
    xiugai(){
      if(!this.form2.oldPwd||!this.form2.newPwd1||!this.form2.newPwd2){
        this.$message.error('输入框不能为空')
        this.dialog = false
        return
      }
      if(this.form2.newPwd1!=this.form2.newPwd2){
        this.$message.error('两次密码不一致')
        this.dialog = false
        return
      }
      // console.log(this.form2);
      this.$axios({
        method: "post",
        url: "/sys/user/reset/pwd",
        headers: { token: this.token },
        data: {
          oldPwd:this.form2.oldPwd,
          newPwd:this.form2.newPwd1,
          id:this.id
        }
      }).then((res)=>{
        // console.log(res);
        if(res.data.code===0){
          this.$message.success("密码修改成功，重新登录");
          window.localStorage.removeItem("token");
          this.token = window.localStorage.getItem("token");
          this.$router.push("/");
        }
      })
        this.dialog = false
    }
  },
};
</script>
<style  scoped>
.box-card {
  margin: 20px;
  width: 900px;
}
.tit {
  color: blue;
}
.infosdiv p {
  margin: 16px 0;
}
</style>>
